<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>播放列表</title>
    <style>
        html,
        body,
        ul,
        li,
        p,
        input {
            margin: 0;
            padding: 0;
            font-size: 14px;
            line-height: 20px;
        }
        
        input {
            margin: 0 20px;
        }
        
        li {
            list-style-type: none;
        }
        
        input {
            float: left;
            margin-right: 20px;
            height: 20px;
            vertical-align: middle;
            outline: none;
        }
        
        p {
            float: left;
            vertical-align: middle;
        }
        
        .clearfix::after {
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
            content: '';
        }
        
        li {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <ul>
        <li class="clearfix">
            <input type="checkbox" name="1" id="">
            <p>私奔</p>
        </li>
        <li class="clearfix">
            <input type="checkbox" name="2" id="">
            <p>北京北京</p>
        </li>
        <li class="clearfix">
            <input type="checkbox" name="3" id="">
            <p>我爱你中国</p>
        </li>
        <li class="clearfix">
            <input type="checkbox" name="4" id="">
            <p>花火</p>
        </li>
        <li class="clearfix">
            <input type="checkbox" name="5" id="">
            <p>回来</p>
        </li>
        <li class="clearfix">
            <input type="checkbox" name="" id="">
            <p>爱要有你才完美</p>
        </li>
    </ul>
    <input id="getAll" type="checkbox" name="" id="">
    <p>全选</p>
    <script>
        var aIpt = document.getElementsByTagName('ul')[0].getElementsByTagName('input');
        var oIpt = document.getElementById('getAll');
        oIpt.onclick = function() {
            if (oIpt.checked) {
                for (var i = 0; i < aIpt.length; i++) {
                    aIpt[i].checked = true;
                }
            } else {
                for (var i = 0; i < aIpt.length; i++) {
                    aIpt[i].checked = false;
                }
            }
        }

        for (var i = 0; i < aIpt.length; i++) {
            aIpt[i].onclick = function() {
                if (document.querySelectorAll('ul input:checked').length == 6) {
                    oIpt.checked = true;
                } else {
                    oIpt.checked = false;
                }
            }
        }
    </script>
</body>

</html>